.top {
      border-bottom: 1px solid #f5f5f5;
    }

    .top .area {
      display: flex;
      justify-content: space-between;
      height: 41px;
      line-height: 41px;
    }

    .top .left-area {
      position: relative;
      display: flex;
    }

    .top .left-area h2 {
      z-index: 999;
    }

    .top .left-area .top-logo {
      display: block;
      width: 150px;
      height: 41px;
      background: url(../img/top_logo.png) no-repeat center center;
    }

    .top .left-area .recommond {
      display: block;
      width: 230px;
    }

    .top .left-area .recommond:hover .ad {
      display: block;
    }

    .top .left-area .ad {
      display: none;
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
    }

    .top .right-area {
      display: flex;
      font-size: 14px;
      color: #464646;
    }

    .top .right-area a {
      position: relative;
      display: block;
    }

    .top .right-area .growth {
      padding-left: 30px;
    }

    .top .right-area .growth::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 30px;
      height: 30px;
      background: url(../img/top_sprite.png) no-repeat -30px 0;
    }

    .top .right-area .ranking {
      position: relative;
      margin-left: 20px;
      padding-right: 30px;
    }

    .top .right-area .ranking::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 30px;
      height: 30px;
      background: url(.../img/top_sprite.png) no-repeat -0 0;
      transform: rotate(90deg);
      opacity: 0.1;
    }

    .top .right-area .ranking .dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: 41px;
    }

    .top .right-area .ranking:hover .dropdown {
      display: block;
      animation: show_opacity 300ms ease-in forwards;
    }

    .top .right-area .ranking .dropdown iframe {
      width: 708px;
      height: 582px;
    }